<template>
  <div class="menu-container">
    <div class="menu-editor-container">
      <div class="menu-editor">
        <!-- 左侧菜单结构 -->
        <div class="menu-structure">
          <div class="phone-preview-box">
            <div class="phone-preview">
              <div class="phone-status">
                <div class="status-icons">
                  <i class="el-icon-signal"></i>
                  <i class="el-icon-wifi"></i>
                  <i class="el-icon-battery-full"></i>
                </div>
              </div>
              <div class="menu-preview">
                <div
                  class="menu-bar"
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                  "
                >
                  <div style="padding: 0 5px">
                    <i
                      class="iconfont icon-hardware_jianpan_keyboard-one"
                      style="font-size: 26px"
                    ></i>
                  </div>
                  <!-- 一级菜单列表 -->
                  <div
                    v-for="(menu, index) in menuList"
                    :key="index"
                    class="menu-item-wrapper"
                    style="border-left: 1px solid #ccc"
                  >
                    <!-- 子菜单区域 -->
                    <div
                      v-if="
                        showBubble === index &&
                        menu.subMenu &&
                        menu.subMenu.length > 0
                      "
                      class="sub-menu-container"
                      :style="{ bottom: menu.bottom }"
                    >
                      <div
                        v-for="(subMenu, subIndex) in menu.subMenu"
                        :key="subIndex"
                        class="sub-menu-item"
                        :class="{
                          active:
                            activeMenuIndex === index &&
                            activeSubMenuIndex === subIndex,
                        }"
                        @click="handleSubMenuClick(index, subIndex)"
                      >
                        <span class="sub-menu-name">{{ subMenu.name }}</span>
                      </div>
                    </div>

                    <!-- 气泡弹窗（添加子菜单） -->
                    <div
                      v-if="
                        showBubble === index &&
                        menu.bubbleContent &&
                        canShowBubble(index)
                      "
                      class="menu-bubble"
                      @click.stop="handleBubbleClick(index)"
                    >
                      <div class="bubble-content">+</div>
                    </div>

                    <!-- 一级菜单 -->
                    <div
                      class="first-level-menu"
                      :class="{
                        active:
                          activeMenuIndex === index &&
                          activeSubMenuIndex === null,
                      }"
                      @click="handleMenuClick(index)"
                    >
                      {{ menu.name || "菜单名称" }}
                      <!-- <i
                      class="el-icon-arrow-right"
                      v-if="menu.subMenu && menu.subMenu.length"
                    ></i> -->
                    </div>
                  </div>
                  <div
                    class="add-menu"
                    @click="addFirstLevelMenu"
                    v-if="menuList.length < 3"
                  >
                    <i class="el-icon-plus"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 菜单操作区 -->
          <!-- <div class="menu-operations">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="addFirstLevelMenu"
            :disabled="menuList.length >= 3"
          >
            添加一级菜单
          </el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="deleteCurrentMenu"
            :disabled="!activeMenu"
          >
            删除菜单
          </el-button>
        </div> -->
        </div>

        <!-- 右侧菜单配置 -->
        <div class="menu-config" v-if="activeMenu">
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
              position: relative;
            "
          >
            <h3 class="title">{{ menuTitle }}</h3>
            <!-- 底部操作按钮 -->
            <div class="menu-actions">
              <el-button
                type="text"
                class="hover"
                style="
                  padding: 0;
                  background: #f65a5a;
                  color: #fff;
                  height: 30px;
                  line-height: 30px;
                  width: 100px;
                  font-size: 13px;
                "
                @click="deleteCurrentMenu"
              >
                删除菜单
              </el-button>
            </div>
          </div>

          <el-form :model="activeMenu" label-width="80px" class="menu-form">
            <!-- 菜单名称 -->
            <el-form-item label="名称" prop="name" style="max-width: 500px">
              <el-input
                v-model="activeMenu.name"
                placeholder="请输入菜单名称"
                :maxlength="4"
              />
              <div class="form-hint">
                仅支持中英文和数字，字数不超过4个汉字或8个字母。
              </div>
            </el-form-item>

            <!-- 消息类型 -->
            <el-form-item label="消息类型">
              <el-radio-group v-model="activeMenu.type">
                <el-radio label="text">发送消息</el-radio>
                <el-radio label="view">跳转网页</el-radio>
                <!-- <el-radio label="miniprogram">跳转小程序</el-radio> -->
                <el-radio label="user">跳转公众号内页面</el-radio>
              </el-radio-group>
            </el-form-item>

            <!-- 菜单内容 (根据类型显示不同内容) -->
            <el-form-item
              label="菜单内容"
              v-if="activeMenu.type === 'text'"
              style="max-width: 500px"
            >
              <el-input
                v-model="activeMenu.content"
                type="textarea"
                rows="4"
                placeholder="请输入消息内容"
                :maxlength="600"
              />
              <div class="form-hint">
                还可以输入
                {{ 600 - (activeMenu.content || "").length }}
                字，按下Enter键换行
              </div>
              <div class="content-tools">
                <el-button icon="el-icon-refresh-left" size="mini"></el-button>
                <el-button icon="el-icon-delete" size="mini"></el-button>
              </div>
            </el-form-item>

            <!-- 网页跳转配置 -->
            <el-form-item
              label="网页链接"
              v-if="activeMenu.type === 'view'"
              style="max-width: 500px"
            >
              <el-input v-model="activeMenu.url" placeholder="请输入网页URL" />
              <div class="form-hint">请填写http://或https://开头的链接</div>
            </el-form-item>

            <!-- 小程序跳转配置 -->
            <!-- <el-form-item label="小程序" v-if="activeMenu.type === 'miniprogram'" style="max-width: 500px;">
            <el-select v-model="activeMenu.appid" placeholder="选择小程序">
              <el-option
                v-for="mp in miniPrograms"
                :key="mp.appid"
                :label="mp.name"
                :value="mp.appid"
              />
            </el-select>
            <el-input
              v-model="activeMenu.pagepath"
              placeholder="小程序页面路径"
              class="mt-2"
            />
          </el-form-item> -->
            <!-- 公众号跳转配置 -->
            <div v-if="activeMenu.type === 'user'" class="wechat-page-config">
              <TreeSelect
                ref="treeSelect"
                :treeData="pageStructure"
                :multiple="false"
                navWidth="200px"
                @select="handleNavSelect"
                @update:active="handleNavActiveUpdate"
              >
                <!-- 左侧导航栏自定义内容 -->
                <template #nav-item-prefix="{ node }">
                  <i
                    class="el-icon-folder"
                    style="margin-right: 5px; font-size: 14px"
                  ></i>
                </template>
                <template #submenu-item-prefix="{ node }">
                  <i
                    class="el-icon-document"
                    style="margin-right: 5px; font-size: 14px"
                  ></i>
                </template>

                <!-- 右侧内容区域 -->
                <div class="preview-content">
                  <div class="preview-header">
                    <h4 style="margin-bottom: 15px; color: #303133">
                      请选择页面
                    </h4>
                    <div v-if="selectedPageInfo" class="page-info">
                      <span class="page-name"
                        >已选择: {{ selectedPageInfo.name }}</span
                      >
                      <el-button
                        type="text"
                        size="small"
                        @click="clearSelection"
                        >清除选择</el-button
                      >
                    </div>
                  </div>

                  <div class="page-preview-grid">
                    <div
                      v-for="(page, pageIndex) in wechatPages"
                      :key="pageIndex"
                      class="page-card"
                      :class="{ selected: activeMenu.pageId === page.id }"
                      @click="selectWechatPage(page)"
                    >
                      <div class="page-preview">
                        <img
                          :src="page.previewUrl"
                          :alt="page.name"
                          class="preview-img"
                        />
                        <div class="page-overlay">
                          <span class="page-title">{{ page.name }}</span>
                        </div>
                      </div>
                      <div class="page-info">
                        <span class="page-path">{{ page.pagePath }}</span>
                      </div>
                      <el-button size="small" class="select-btn">
                        {{ activeMenu.pageId === page.id ? "已选择" : "选择" }}
                      </el-button>
                    </div>
                  </div>
                  <!-- 暂时注释后续需要打开 -->
                  <!-- <div class="config-footer">
                  <el-button @click="resetConfiguration">重置</el-button>
                  <el-button type="primary" @click="saveConfiguration"
                    >保存配置</el-button
                  >
                </div> -->
                </div>
              </TreeSelect>
            </div>
          </el-form>
        </div>
        <!-- 右侧页面预览区 -->
        <div class="menu-config empty" v-else>
          <p>请选择一个菜单进行编辑</p>
        </div>
      </div>
      <!-- 底部发布按钮 -->
      <div class="menu-footer">
        <!-- <el-button @click="previewMenu">预览</el-button> -->
        <el-button class="primary-button" style="padding: 12px 30px;"  @click="saveAndPublish">发布</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 菜单列表数据
      menuList: [
        {
          id: 1,
          name: "进入官网",
          type: "text",
          content: "请点击我进入官网\nwww.ikua8.com",
          subMenu: [],
          bubbleContent: "+",
          bottom: "87px",
        },
        {
          id: 2,
          name: "请点击我",
          type: "view",
          url: "",
          subMenu: [],
          bubbleContent: "+",
          bottom: "87px",
        },
        {
          id: 3,
          name: "菜单名称",
          type: "text",
          content: "",
          subMenu: [],
          bubbleContent: "+",
          bottom: "87px",
        },
      ],
      // 选中的菜单索引
      activeMenuIndex: 0,
      activeSubMenuIndex: null,
      // 显示气泡的菜单索引
      showBubble: 0,
      // 小程序列表（模拟数据）
      miniPrograms: [
        { appid: "wx123456789", name: "示例小程序1" },
        { appid: "wx987654321", name: "示例小程序2" },
      ],

      // 存储选中的菜单列表
      menuSelections: [],
      // 树形结构数据
      pageStructure: [
        {
          id: "home",
          label: "首页",
          expanded: true,
          active: true,
          children: [
            {
              id: "banner",
              label: "首页轮播",
              expanded: true,
              active: false,
              children: [
                { id: "magic-nav", label: "魔方导航", active: false },
                { id: "quick-service", label: "快捷服务", active: false },
                { id: "activity-signup", label: "活动报名", active: false },
              ],
            },
          ],
        },

        {
          id: "tab",
          label: "横向标签",
          expanded: false,
          active: false,
          children: [
            { id: "notice", label: "通知公告", active: false },
            { id: "news", label: "新闻咨询", active: false },
          ],
        },
        {
          id: "info",
          label: "资讯中心",
          expanded: false,
          active: false,
          children: [],
        },
        {
          id: "user",
          label: "个人中心",
          expanded: false,
          active: false,
          children: [],
        },
      ],
      // 公众号页面列表
      wechatPages: [
        {
          id: 1,
          name: "首页",
          previewUrl:
            "https://lingxin1314.oss-cn-beijing.aliyuncs.com/weixiaozhu/page1.png",
          pagePath: "pages/index/index",
        },
        {
          id: 2,
          name: "活动列表",
          previewUrl:
            "https://lingxin1314.oss-cn-beijing.aliyuncs.com/weixiaozhu/page2.png",
          pagePath: "pages/activity/list",
        },
        {
          id: 3,
          name: "资讯中心",
          previewUrl:
            "https://lingxin1314.oss-cn-beijing.aliyuncs.com/weixiaozhu/page3.png",
          pagePath: "pages/news/list",
        },
        {
          id: 4,
          name: "个人中心",
          previewUrl:
            "https://lingxin1314.oss-cn-beijing.aliyuncs.com/weixiaozhu/page4.png",
          pagePath: "pages/user/index",
        },
      ],
    };
  },
  computed: {
    // 当前选中的菜单
    activeMenu() {
      if (
        this.activeSubMenuIndex !== null &&
        this.menuList[this.activeMenuIndex]
      ) {
        return this.menuList[this.activeMenuIndex].subMenu[
          this.activeSubMenuIndex
        ];
      }
      return this.menuList[this.activeMenuIndex];
    },
    // 菜单标题（根据当前选中的是主菜单还是子菜单动态显示）
    menuTitle() {
      return this.activeSubMenuIndex !== null ? "子菜单信息" : "菜单信息";
    },
  },
  methods: {
    // 点击一级菜单
    handleMenuClick(index) {
      // 激活主菜单，清除子菜单激活状态
      this.activeMenuIndex = index;
      this.activeSubMenuIndex = null;
      // 始终显示气泡弹窗
      this.showBubble = index;
      // 始终保持切换主菜单右侧显示对应主菜单的内容
      console.log(
        "点击了一级菜单",
        index,
        this.menuList,
        this.showBubble,
        this.activeMenuIndex
      );
    },

    handleBubbleClick(index) {
      console.log("点击了气泡", index, this.menuList, this.showBubble);
      // 获取当前菜单
      const currentMenu = this.menuList[index];

      // 检查当前菜单的子菜单数量是否少于5个
      if (!currentMenu.subMenu) {
        currentMenu.subMenu = [];
      }

      if (currentMenu.subMenu.length >= 5) {
        return; // 已达到最大子菜单数量
      }

      // 创建新的子菜单项
      const newSubMenu = {
        name: `子菜单名称${currentMenu.subMenu.length + 1}`,
        type: "text",
        content: "",
      };

      // 添加到对应菜单的子菜单列表
      currentMenu.subMenu.push(newSubMenu);

      // 自动选中新添加的子菜单
      this.activeMenuIndex = index;
      this.activeSubMenuIndex = currentMenu.subMenu.length - 1;
      // 如果子菜单满足5个  恢复原始定位
      if (this.menuList[index].subMenu.length == 5) {
        this.menuList[index].bottom = "47px";
      }
      console.log("开始添加了", index, this.menuList);
    },

    canShowBubble(parentIndex) {
      // 检查当前菜单的子菜单数量是否少于5个
      const currentMenu = this.menuList[parentIndex];
      const subMenuCount = currentMenu.subMenu ? currentMenu.subMenu.length : 0;
      return subMenuCount < 5;
    },

    // 点击二级菜单
    handleSubMenuClick(menuIndex, subIndex) {
      // 激活子菜单时，仍然保持activeMenuIndex为menuIndex用于跟踪所属的主菜单
      this.activeMenuIndex = menuIndex;
      this.activeSubMenuIndex = subIndex;
      // 保留气泡显示状态
      this.showBubble = menuIndex;
    },

    // 添加一级菜单
    addFirstLevelMenu() {
      if (this.menuList.length >= 3) {
        this.$message.warning("最多只能添加3个一级菜单");
        return;
      }
      this.menuList.push({
        name: "新菜单",
        type: "text",
        content: "",
        subMenu: [],
      });
      this.activeMenuIndex = this.menuList.length - 1;
      this.activeSubMenuIndex = null;
    },

    // 添加二级菜单
    addSubMenu() {
      console.log("开始添加了");
      const currentMenu = this.menuList[this.activeMenuIndex];
      if (!currentMenu.subMenu) currentMenu.subMenu = [];
      if (currentMenu.subMenu.length >= 5) {
        this.$message.warning("最多只能添加5个子菜单");
        return;
      }
      currentMenu.subMenu.push({
        name: "子菜单",
        type: "text",
        content: "",
      });
      this.activeSubMenuIndex = currentMenu.subMenu.length - 1;
    },

    // 删除当前选中的菜单
    deleteCurrentMenu() {
      if (this.activeSubMenuIndex !== null) {
        // 删除子菜单
        this.menuList[this.activeMenuIndex].subMenu.splice(
          this.activeSubMenuIndex,
          1
        );
        // this.activeSubMenuIndex = null;
      } else {
        // 删除一级菜单
        this.menuList.splice(this.activeMenuIndex, 1);
        this.activeMenuIndex = this.menuList.length > 0 ? 0 : null;
      }
      // 如果子菜单满足5个  恢复原始定位
      if (this.menuList[this.activeMenuIndex].subMenu.length < 5) {
        this.menuList[this.activeMenuIndex].bottom = "87px";
      }
      console.log("删除了", this.menuList, this.activeMenuIndex);
    },

    // 预览菜单
    previewMenu() {
      this.$message.info("正在生成预览...");
    },
    // 选择公众号页面
    selectWechatPage(page) {
      // 实现选择微信页面的逻辑
      this.activeMenu.pageId = page.id;
      this.activeMenu.pagePath = page.pagePath;
      this.selectedPageInfo = { ...page };

      // 提供用户反馈
      this.$message.success(`已选择页面：${page.name}`);
    },

    // 处理导航项选择
    handleNavSelect(node, parent) {
      console.log("导航项被选中:", node, "父节点:", parent);
      // 可以在这里添加额外的处理逻辑
    },

    // 处理导航项激活状态更新
    handleNavActiveUpdate(activeNode) {
      console.log("导航激活状态更新:", activeNode);
    },

    // 清除选择
    clearSelection() {
      this.activeMenu.pageId = null;
      this.activeMenu.pagePath = null;
      this.selectedPageInfo = null;
    },

    // 展开所有节点
    expandAll() {
      this.$refs.treeSelect?.expandAll();
    },

    // 折叠所有节点
    collapseAll() {
      this.$refs.treeSelect?.collapseAll();
    },

    // 保存配置
    saveConfiguration() {
      if (!this.selectedPageInfo) {
        this.$message.warning("请选择一个页面");
        return;
      }
      this.$message.success("配置保存成功");
    },

    // 重置配置
    resetConfiguration() {
      this.clearSelection();
      this.$refs.treeSelect?.resetActiveStates();
    },
    // 保存并发布
    saveAndPublish() {
      // 验证菜单合法性
      const invalidMenus = this.menuList.filter((menu) => !menu.name);
      if (invalidMenus.length > 0) {
        return this.$message.error("请完善所有菜单名称");
      }

      // 模拟提交
      this.$confirm("确定要发布菜单吗？发布后将覆盖原有菜单", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$message.success("菜单发布成功");
      });
    },
  },
};
</script>

<style scoped lang="scss">
.menu-container {
  padding: 40px 50px;
  border-radius: 4px;
  background-image: url("@/assets/template/step_back.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.menu-editor {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
  /* 纯白 */
  border: 1px solid #ffffff;
  backdrop-filter: blur(30px);
  position: relative;
}
.menu-editor-container {
  background: rgba(255, 255, 255, 0.6);
  box-sizing: border-box;
  border-radius: 10px;
  padding: 20px;
}

/* 左侧菜单结构 */
.menu-structure {
  width: 300px;
}
.phone-preview-box {
  border-radius: 30px;
  background-color: #f5f5f5;
  height: 580px;
  display: flex;
  align-items: center;
  justify-content: center;
  //  padding:15px;
  //  box-sizing: border-box;
}
.phone-preview {
  padding-top: 10px;
  // border: 1px solid #e4e7ed;
  background-color: #fcfcfc;
  border-radius: 23px;
  overflow: hidden;
  height: 560px;
  width: 280px;
  position: relative;
}

.phone-status {
  height: 20px;
  width: 80px;
  border-radius: 30px;
  background-color: #d8d8d8;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  font-size: 12px;
}

.status-icons {
  display: flex;
  gap: 5px;
}

.menu-preview {
  position: absolute;
  width: 100%;
  bottom: 0;
  padding: 10px 0;
  background-color: #fff;
}

.menu-bar {
  display: flex;
  justify-content: space-around;
  position: relative;
}

.menu-item-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  &:last-child {
    border-right: none !important;
  }
}

/* 子菜单样式 */
.sub-menu-container {
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 80px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 5;
  background-color: white;
  border-radius: 4px;
  padding: 2px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #ebeef5;
}

.sub-menu-item {
  background-color: white;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 2px;
  cursor: pointer;
  transition: all 0.3s;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

.sub-menu-item:last-child {
  margin-bottom: 0;
}

.sub-menu-item:hover {
  background-color: #ecf5ff;
  border-color: #c6e2ff;
}

.sub-menu-item.active {
  background-color: #ecf5ff;
  border-color: #409eff;
  color: #409eff;
  font-weight: 500;
}

/* 气泡弹窗样式 */
.menu-bubble {
  position: absolute;
  bottom: 38px;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  color: #1fcb43;
  font-size: 16px;
  cursor: pointer;
  z-index: 10;
  height: 40px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #1fcb43;
  background-color: white;
  transition: all 0.3s;
  font-weight: bold;
  width: 80px;
}

.menu-bubble:hover {
  background-color: #f0f9ff;
  color: #18a058;
  border-color: #18a058;
}
// 暂时不用
.menu-bubble .bubble-arrow {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(0, 0, 0, 0.7);
}

.first-level-menu {
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  position: relative;
  min-width: 60px;
  text-align: center;
}

.first-level-menu.active {
  background-color: #e6f7ff;
  color: #1890ff;
}

.first-level-menu .el-icon-arrow-right {
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  font-size: 12px;
}

.add-menu {
  width: 24px;
  height: 24px;
  border: 1px dashed #ccc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #999;
}

.submenu-list {
  padding: 10px;
  border-top: 1px solid #eee;
  margin-top: 5px;
}

.submenu-item {
  padding: 8px 15px;
  margin-bottom: 5px;
  background-color: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.submenu-item.active {
  border-left: 3px solid #1890ff;
  color: #1890ff;
}

.add-submenu {
  text-align: center;
  padding: 5px;
  color: #666;
  cursor: pointer;
  font-size: 14px;
}

.menu-operations {
  display: flex;
  gap: 10px;
}

/* 右侧菜单配置 */
.menu-config {
  flex: 1;
  padding: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}

.menu-config.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  height: 300px;
}

.menu-form {
  margin-top: 20px;
}

.form-hint {
  color: #909399;
  font-size: 12px;
  margin-top: 5px;
}

.content-tools {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}

.menu-actions {
  position: absolute;
  right: 0;
}

/* 底部按钮区 */
.menu-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.mt-2 {
  margin-top: 10px !important;
}

/* 公众号页面配置样式 */
.wechat-page-config {
  margin-top: 20px;
  padding: 14px;
  border-radius: 10px;
  background-color: #f0f7ff;
}

.page-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 15px;
  height: 320px;
  //  border-right: none; /* 去掉右侧边框 */
  /* 隐藏滚动条但保持滚动功能 */
  // scrollbar-width: none; /* Firefox */
}
/************************* * 隐藏Webkit浏览器的滚动条 单独设置  滚动条样式 */
.page-preview-grid::-webkit-scrollbar {
  // display: none;
}

.page-preview-grid::-webkit-scrollbar {
  width: 6px;
}

.page-preview-grid::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.page-preview-grid::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 3px;
}
/************************* * 隐藏Webkit浏览器的滚动条 **********************/

.page-card {
  border: 2px solid transparent;
  border-radius: 8px;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.page-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.page-card.selected {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.page-preview {
  background-color: #f5f7fa;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 12px;
  padding: 8px;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  transition: transform 0.3s ease;
}

.page-card:hover .preview-img {
  transform: scale(1.02);
}

.select-btn {
  width: 50px;
  height: 25px;
  padding: 0 !important;
  line-height: 20px;
  margin-top: 8px;
  color: #fff;
  border-radius: 20px;
  background-color: #0eb275;
}

.page-card.selected .select-btn {
  background-color: #67c23a;
  border-color: #67c23a;
}

/* 滚动条样式 */
.page-preview-grid {
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: 10px;
}

.page-preview-grid::-webkit-scrollbar {
  height: 6px;
}

.page-preview-grid::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.page-preview-grid::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

.page-preview-grid::-webkit-scrollbar-thumb:hover {
  background: #555;
}
</style>
